<template>
  <view>
    <el-card>
        <template #header>
            <div class="card-header">
              <span>AI 内容生成</span>
            </div>
        </template>
      <el-button type="primary" @click="handleExpand" :loading="expanding">点击生成</el-button>
      <el-input v-model="title" placeholder="请输入标题"></el-input>
      <VMdTextareaEditor v-model="result" :mode="`preview`" />
    </el-card>
  </view>
</template>
  
<script setup>
import { ref, watch, defineProps, defineEmits } from 'vue';
import VMdTextareaEditor from "@kangc/v-md-editor";
import { ai } from "@/api";

// 定义props和emits
const props = defineProps({
  modelValue: String, // 使用 modelValue 作为 v-model 的 prop
});
const emit = defineEmits(["update:modelValue"]); // 使用 update:modelValue 作为事件名

// 使用ref创建响应式的数据，直接使用 props.modelValue 初始化
const result = ref(props.modelValue);
const title = ref("");
const expanding = ref(false);

// 准备请求数据
function prepareData() {
  return JSON.stringify({
    model: "gpt-3.5-turbo",
    messages: [
      {
        role: "system",
        content: "你是技术文章编写助手，请将用户发的句子当成主题编写文章，不少于三段话，注意格式为md，不要有不必要的输出",
      },
      {
        role: "user",
        content: title.value,
      },
    ],
  });
}

// 处理点击事件
async function handleExpand() {
  if (!title.value) {
    alert("请输入标题");
    return;
  }
  expanding.value = true;
  try {
    const res = await ai.expand(prepareData());
    result.value = res.data.choices[0].message.content; // 更新result
    emit("update:modelValue", result.value); // 确保修改后立即发出更新事件
  } catch (err) {
    console.error(err);
    alert("请求失败，请稍后重试");
  } finally {
    expanding.value = false;
  }
}

// 监听props.modelValue的变化
watch(
  () => props.modelValue,
  (newValue) => {
    result.value = newValue; // 同步外部的modelValue到本地的result
  }
);

// 监听本地result的变化，以便更新父组件
watch(result, (newValue, oldValue) => {
  if (newValue !== oldValue) {
    emit("update:result", newValue);
  }
});

// 将需要在模板中使用的响应式属性和方法暴露出去
const exposed = {
  title,
  result,
  handleExpand,
};
</script>

<style scoped>
/* 在这里添加你的样式 */
.el-card {
  min-height: 100px;
}
</style>